<template>
	<cl-crud ref="crud" @load="onLoad">
		<el-row type="flex" class="h-100">
			<div class="slide flex-column">
				<div class="title pb-1">卡项</div>
				<cl-flex1 style="overflow: auto">
					<el-tree
						:data="treeList"
						:default-expanded-keys="expandedTreeKeys"
						node-key="value"
						@node-click="handleNodeClick"
					/>
				</cl-flex1>
			</div>
			<cl-flex1 style="overflow: hidden" class="pl-1 h-100">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex">
							<span class="title">{{ currNode.label }}</span>
							<cl-flex1 />
							<div>
								<cl-filter-group v-model="search">
									<cl-filter label="卡项标签">
										<cl-select
											v-model="search.tag_id"
											placeholder="全部"
											clearable
											style="width: 100%"
											filterable
										>
											<el-option
												v-for="item in tagList"
												:key="item.id"
												:label="item.tname"
												:value="item.id"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="卡项分类">
										<cl-cascader
											style="width: 100%"
											v-model="search.category"
											:options="cateList"
											placeholder="请选择卡项分类"
											filterable
										/>
									</cl-filter>
									<cl-filter label="状态">
										<cl-select
											v-model="search.status"
											placeholder="请选择状态"
											style="width: 120px"
											clearable
											@change="refresh()"
										>
											<el-option label="全部" value="" />
											<el-option label="上架" value="1" />
											<el-option label="下架" value="2" />
										</cl-select>
									</cl-filter>
									<cl-filter label="关键字">
										<el-input
											v-model="search.search"
											placeholder="卡项名称"
											clearable
											@change="refresh()"
										/>
									</cl-filter>
								</cl-filter-group>
								<el-button icon="el-icon-plus" size="small" type="primary" @click="add">
									新增卡项
								</el-button>
							</div>
						</el-row>
					</template>
					<cl-table
						class="list"
						v-bind="table"
						:props="{
							maxHeight: this.tableHeight
						}"
					>
						<cl-empty slot="empty" />
						<!-- <template #column-cover="{ scope: { row } }">
							<div class="flex flex-align-center">
								<cl-avatar :src="getCover(row)" shape="square" class="mr-1" />
								<cl-flex1 style="text-align: left" class="ellipsis">
									{{ row.sc_name }}
								</cl-flex1>
							</div>
						</template> -->
						<template #column-status="{ scope: { row } }">
							<el-tag v-if="row.status == 1">上架</el-tag>
							<el-tag type="danger" v-else>下架</el-tag>
						</template>
						<template #column-opt="{ scope: { row } }">
							<div class="flex flex-align-start">
								<el-button type="primary" @click="edit(row)">修改</el-button>
								<el-button type="danger" @click="del(row)">删除</el-button>
							</div>
						</template>
					</cl-table>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
			<!-- 新增、修改 -->
		</el-row>
		<card-form ref="form" />
	</cl-crud>
</template>
<script>
import CardForm from "./card-form";
export default {
	provide() {
		return {
			parent: this
		};
	},
	components: {
		CardForm
	},
	data() {
		return {
			table: {
				"context-menu": ["refresh"],
				columns: [
					// { label: "卡项", prop: "cover", minWidth: 150 },
					{
						label: "卡项名称",
						prop: "sc_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "卡项售价（￥）",
						prop: "price",
						width: 120,
						formatter: row => `${this.toFixed(row.price)}`
					},
					{
						label: "卡项内容",
						prop: "card_desc",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "卡项标签",
						prop: "tname",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "卡项分类",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true,
						formatter: row => {
							return row.f_category_name
								? row.f_category_name + "/" + row.s_category_name
								: "";
						}
					},
					{ label: "卡项状态", prop: "status", width: 80 },
					{ label: "操作", prop: "opt", width: 145, fixed: "right" }
				]
			},
			search: {
				search: "",
				status: "",
				tag_id: "",
				category: [],
				biz_id: "",
				sc_type: "",
				pagedata: 1
			},
			treeList: [],
			expandedTreeKeys: [],
			tagList: [],
			cateList: [],
			cardTypeOpt: [
				{ type: 1, label: "储值卡" },
				// { type: 2, label: "打折卡" },
				{ type: 3, label: "时段卡" },
				{ type: 4, label: "疗程总次卡" }
				// { type: 5, label: "疗程分次卡" }
			],
			type: "add",
			currNode: {},
			info: {},
			saving: false,
			tableHeight: 500
		};
	},

	async created() {
		await this.getTreeList();
		await this.getTagList();
		await this.getCateList();
	},
	methods: {
		getCover(item) {
			return item.cover || require(`@/assets/img/card/${item.sc_type || 1}.png`);
		},
		onResize(h) {
			this.tableHeight = h;
		},
		handleNodeClick(e) {
			console.log("e.type", e.type);
			if (!e.type) return;
			this.currNode = e;
			this.search.biz_id = e.biz_id;
			this.search.sc_type = e.type;
			this.search.tag_id = "";
			this.search.category = [];
			this.getTagList();
			this.getCateList();
			this.refresh();
		},
		getTreeList() {
			let list = this.business.map(v => {
				// delete v.value;
				return {
					...v,
					value: "biz_" + v.biz_id,
					children: this.cardTypeOpt.map(c => ({
						...c,
						value: `biz_${v.biz_id}_${c.type}`,
						biz_id: v.biz_id
					}))
				};
			});
			if (!list.length) return;
			this.treeList = list;
			let first = list[0];
			this.expandedTreeKeys = [first?.value];
			this.currNode = first?.children[0] ?? {};
			this.search.biz_id = this.currNode.biz_id;
			this.search.sc_type = this.currNode.type;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.servicecard)
				.set("dict", {
					api: {
						page: "pageLists"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		async getTagList() {
			const { biz_id } = this.search;
			this.tagList = [];
			if (!biz_id) return;
			const data = await this.$service.tag.lists({
				biz_id,
				type: 3,
				status: 1
			});
			this.tagList = data?.lists ?? [];
		},
		async getCateList() {
			const { biz_id } = this.search;
			const res = await this.$service.service.getType({
				type: 1,
				biz_id
			});
			this.cateList = res.map(item => {
				return {
					...item,
					value: item.id,
					label: item.cname,
					children: item.childlist.map(itm => {
						return {
							...itm,
							value: itm.id,
							label: itm.cname
						};
					})
				};
			});
		},
		//新增服务
		add() {
			this.openForm();
		},
		openForm(editing = false, data = {}) {
			this.$refs.form.open(editing, data);
		},
		reset() {
			this.$refs.drawer.close();
		},
		//删除服务
		del(row) {
			this.confirm("是否执行此操作?")
				.then(() => {
					this.$service.servicecard
						.del({ sc_id: row.sc_id, biz_id: row.biz_id })
						.then(res => {
							this.refresh();
							this.$message.success("删除成功!");
						});
				})
				.catch(() => {
					this.$message.info("已取消删除");
				});
		},
		//修改
		async edit(row) {
			this.openForm(true, row);
		}
	}
};
</script>
<style lang="scss" scoped>
.slide {
	box-shadow: 1px 0 1px -1px #969797;
	height: 100%;
	width: 230px;
}
.title {
	font-size: 18px;
}
::v-deep .el-tree-node__content {
	height: 40px !important;
}
</style>
